<div class="clearfix col-lg-6 col-md-6 col-sm-8 col-xs-12 col-lg-offset-3
col-md-offset-3 col-sm-offset-2 login-wrapper">
  <mat-card class="example-card">
    <mat-card-header style="margin-bottom: 30px;">
      <div class="container row">
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center">
          <button routerLink="/login" mat-raised-button color="primary" class="col-lg-12">
            登录
          </button>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center">
          <button routerLink="/reg" mat-raised-button color="basic" class="col-lg-12">
            注册
          </button>
        </div>
      </div>
    </mat-card-header>
    <mat-card-content class="col-lg-12">
      <div class="text-center col-lg-12">
        <mat-form-field style="width: 80%;">
          <input matInput type="text" #input placeholder="手机号码或邮箱">
        </mat-form-field>
      </div>
      <div class="text-center col-lg-12">
        <mat-form-field style="width: 80%;" hintLabel="最多20位">
          <input matInput type="password" #input maxlength="20" placeholder="密码">
          <mat-hint align="end">{{input.value?.length || 0}}/20</mat-hint>
        </mat-form-field>
      </div>

    </mat-card-content>
    <mat-card-actions class="text-center">
      <button mat-button>确认</button>
      <button mat-button>忘记密码？</button>
    </mat-card-actions>
  </mat-card>
</div>